

// import Test from '../../components/Test.vue'
export const addHorizontalPicture = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('addHorizontalPicture', {
        model: {
            defaults: {
                name: 'addHorizontalPicture',
                droppable: true,
                attributes: {
                    class:'outline',
                    speed:'30',//滚动速度30毫秒/帧
                    width:'40%',
                    height:'253px',
                    cirModel:'left'
                },
                traits: [
                    {
                        type: 'text',  
                        label: '标题',  
                        name: 'title',  
                      },  
                      {  
                        type: 'text',  
                        label: 'id',  
                        name: 'id'
                      },  
                      {
                        type: 'number',
                        label: '高',
                        changeProp:1,
                        name: 'height',
                        default: '253px',
                      },  
                      {
                        type: 'number',
                        label: '宽',
                        changeProp:1,
                        name: 'width',
                        default: '40%',
                      },
                      {
                        type: 'select', 
                        name: 'cirModel', 
                        label: '滚动模式',
                        changeProp: 1,
                        default: 'left',
                        options: [
                          { id: 'left', label: '向左滚动'},
                          { id: 'right', label: '向右滚动'},
                        ]
                      }, 
                      {
                        type: 'number',
                        name: 'speed',
                        label:'滚动速度(毫秒/帧)',
                        changeProp:1,
                        default: '30',//毫秒
                      },
                ],
                components: [{
                    type: 'div',
                    attributes: {
                        class: 'div1'
                    },
                    components: [{
                        tagName: 'ul',
                        components: [{
                            tagName:'li',
                            components: [{
                                type: 'image',
                                attributes: {
                                    src:'http://imgsrc.baidu.com/imgad/pic/item/ac6eddc451da81cbf7a8b6e35966d01609243155.jpg'
                                },
                            }]
                        },
                        {
                            tagName:'li',
                            components: [{
                                type: 'image',
                                attributes: {
                                    src:'http://imgsrc.baidu.com/imgad/pic/item/ac6eddc451da81cbf7a8b6e35966d01609243155.jpg'
                                },
                            }]
                        },
                        {
                            tagName:'li',
                            components: [{
                                type: 'image',
                                attributes: {
                                    src:'http://imgsrc.baidu.com/imgad/pic/item/ac6eddc451da81cbf7a8b6e35966d01609243155.jpg'
                                },
                            }]
                        }]
                    }],
                }],
                script() {
                    window.clearInterval(sessionStorage.getItem(this.attributes.id.value))
                    var thx = document.getElementById(this.attributes.id.value);
                    thx.style.width = `${this.attributes.width.value}%`;
                    thx.style.height = `${this.attributes.height.value}px`;
                    var speed = this.attributes.speed.value;
                    var oDiv = thx.getElementsByClassName("div1")[0];
                    var oUl = oDiv.getElementsByTagName("ul")[0];
                    var oLi = oUl.getElementsByTagName("li");
                    oUl.innerHTML += oUl.innerHTML; //复制一遍ul
                    // let Marquee = null;
                    // switch(this.attributes.cirModel.value){
                    //     case 'down':
                    //         Marquee = ()=>{//向下滚动
                    //             if(colee1.offsetTop - colee.scrollTop >= 0) {
                    //                 colee.scrollTop += colee2.offsetHeight; //colee跳到最顶端
                    //             } else {
                    //                 colee.scrollTop--
                    //             }
                    //         }
                    //         break;
                    //     case 'up':
                    //         Marquee = ()=>{//向上滚动
                    //             //当滚动至colee1与colee2交界时
                    //             if(colee2.offsetTop - colee.scrollTop <= 0) {
                    //                 colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
                    //             } else {
                    //                 colee.scrollTop++
                    //             }
                    //         }
                    //         break;
                    // }
                    // var MyMar = setInterval(Marquee, speed) //设置定时器
                    // //鼠标移上时清除定时器达到滚动停止的目的
                    // let that = this;
                    // colee.onmouseover = function() { window.clearInterval(sessionStorage.getItem(that.attributes.id.value)) }
                    // //鼠标移开时重设定时器
                    // colee.onmouseout = function() { 
                    //     MyMar = setInterval(Marquee, speed) ;
                    //     sessionStorage.setItem(that.attributes.id.value,MyMar);
                    // }
                    // sessionStorage.setItem(this.attributes.id.value,MyMar);
                },
                styles: `
                .outline{width:40%;height:253px;}
                .div1
                {
                    position: relative;
                    margin: 10px auto;
                    border: 1px solid black;
                    width: 100%;
                    height:100%;
                    overflow: hidden;
                }
                .div1 ul
                {
                    position: absolute;
                    left:0;
                }
                .div1 ul li
                {
                    float:left;
                    padding: 10px;
                    list-style: none;
                    width: 150px;
                    height: 150px;
                }
                .div1 ul li img
                {
                    width: 150px;
                    height: 150px;
                }

                `,
                 },
                init() {
                    // let that = this;
                    // // 滚动速率
                    // that.on('change:speed', function() {
                    //     that.get('attributes').speed = that.attributes.speed
                    //     // 回调script
                    //     that.trigger("change:script");
                    // });  
                    // // 宽
                    // that.on('change:width', function() {
                    //     that.get('attributes').width = that.attributes.width
                    //     // 回调script
                    //     that.trigger("change:script");
                    // }); 
                    // // 高
                    // that.on('change:height', function() {
                    //     that.get('attributes').height = that.attributes.height
                    //     // 回调script
                    //     that.trigger("change:script");
                    // }); 
                    // // 滚动模式
                    // that.on('change:cirModel', function() {
                    //     that.get('attributes').cirModel = that.attributes.cirModel
                    //     // 回调script
                    //     that.trigger("change:script");
                    // });
                },
        }
    });

    // 注册组件
    editor.BlockManager.add('addHorizontal-picture', {
        label: '轮播图图片(水平)',
        category: '图片类',
        content: {
            type: 'addHorizontalPicture'
        },
        media:`<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M160 80H512c8.8 0 16 7.2 16 16V320c0 8.8-7.2 16-16 16H490.8L388.1 178.9c-4.4-6.8-12-10.9-20.1-10.9s-15.7 4.1-20.1 10.9l-52.2 79.8-12.4-16.9c-4.5-6.2-11.7-9.8-19.4-9.8s-14.8 3.6-19.4 9.8L175.6 336H160c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16zM96 96V320c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H160c-35.3 0-64 28.7-64 64zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120V344c0 75.1 60.9 136 136 136H456c13.3 0 24-10.7 24-24s-10.7-24-24-24H136c-48.6 0-88-39.4-88-88V120zm208 24a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>`
    });
};